<template>
	<view>
		<!-- 小说图片简介等 -->
		<view class="uni-list ">
			<view class="uni-media-list">
				<image class="uni-media-list-logo" :src="novel.image"></image>
		
				<view class="uni-media-list-body" style="height: 100px;">
					<view class="uni-media-list-text-top">{{novel.title}}</view>
		
					<view style="width: 216px;justify-content:space-between;display: flex;">
						<text >{{ novel.author }}</text>
						
					</view>
					
					<text >{{ novel.category }}</text>
					
					<view class="uni-media-list-text-bottom description">
						<text >{{ novel.description }}</text>
					</view>
				</view>
			</view>
			<!-- 
			<view class="" >
				
				<image class="uni-media-list-logo" :src="novel.image"  ></image>
				
				<view class="" >
					<view class="uni-media-list-text-top">{{novel.title}}</view>
					<view class=" uni-ellipsis">{{novel.category}}</view>
					<view class=" uni-ellipsis">{{novel.author}}</view>
					<view class=" uni-ellipsis">{{novel.description}}</view>
				</view>
			</view>
			  -->
		</view>
		<!-- 章节信息 -->
		<view class="text-box" style="text-align: center;" scroll-y="true">
                <text style="font-size: 20px;">所有章节</text>
            </view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in chapters" :key="index">
				<view class="uni-media-list">
					<view class="uni-media-list-body" @tap="toContent(item.id)">
						<view class="uni-media-list-text-top">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>



export default {
	data() {
		return {
			novel:{},
			chapters:[]
		};
	},
	onLoad(event) {
		// TODO 后面把参数名替换成 payload
		const payload = event.detail || event.payload;
		// 目前在某些平台参数会被主动 decode，暂时这样处理。
		try {
			this.novel = JSON.parse(decodeURIComponent(payload));
		} catch (error) {
			this.novel = JSON.parse(payload);
		}
		uni.setNavigationBarTitle({
			title: this.novel.title
		});
		//根据小说id获取章节信息
		this.getDetail();
	},
	methods: {
		getDetail() {
			uni.request({
				url: 'http://localhost:8080/chapters/' + this.novel.id,
				success: data => {
					if (data.statusCode == 200) {
						this.chapters = data.data.body.chapters;
					}
				},
				fail: () => {
					console.log('fail');
				}
			});
		},
		toContent(id){
			// console.log("cesi"+id)
			uni.navigateTo({
				url: '../content/content?cid=' + id + "&novel=" + encodeURIComponent(JSON.stringify(this.novel))
			});
		}
	}
};
</script>

<style>
.banner {
	height: 360upx;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

.banner-img {
	width: 100%;
}

.banner-title {
	max-height: 84upx;
	overflow: hidden;
	position: absolute;
	left: 30upx;
	bottom: 30upx;
	width: 90%;
	font-size: 32upx;
	font-weight: 400;
	line-height: 42upx;
	color: white;
	z-index: 11;
}

.uni-media-list-logo {
	width: 180upx;
	height: 250upx;
}

.uni-media-list-body {
	height: auto;
	justify-content: space-around;
	height: 45upx;
}

.uni-media-list-text-top {
	height: 37upx;
	font-size: 28upx;
	font-weight: 900;
	overflow: hidden;
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* overflow: hidden;
	text-overflow: ellipsis; */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.2;
}
.author {
	width:130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.description{
	text-indent: 25px;
}
</style>
